
$(function(){
	$.fn.autocomplete = function(params) {

		//Selections
		var currentSelection = -1;
		var currentProposals = [];

		//Default parameters
		params = $.extend({
			hints: [],
			//			placeholder: 'Search',
			width: 200,
			height: 16,
			showButton: true,
			buttonText: 'Search',
			onSubmit: function(text) {},
			onBlur: function() {}
		}, params);

		//Build messagess
		this.each(function() {
			//Container
			var searchContainer = $('<div></div>')
				.addClass('autocomplete-container')
				.css('height', params.height * 2);

			//Text input		
			var input = $(".input")
				.attr('placeholder', params.placeholder)
				//				.addClass('autocomplete-input')
				.css({
					'width': params.width,
					'height': params.height,
				});

			//			if(params.showButton){
			//				input.css('border-radius', '3px 0 0 3px');
			//			}

			//Proposals
			var proposals = $('<div></div>')
				.addClass('proposal-box')
				.css('width', params.width + 18)
				.css('top', input.height() + 20);
			var proposalList = $('<ul></ul>')
				.addClass('proposal-list');

			proposals.append(proposalList);

			input.keydown(function(e) {
				switch(e.which) {
					case 38: // Up arrow
						e.preventDefault();
						$('ul.proposal-list li').removeClass('selected');
						if((currentSelection - 1) >= 0) {
							currentSelection--;
							$("ul.proposal-list li:eq(" + currentSelection + ")")
								.addClass('selected');
						} else {
							currentSelection = -1;
						}
						break;
					case 40: // Down arrow
						e.preventDefault();
						if((currentSelection + 1) < currentProposals.length) {
							$('ul.proposal-list li').removeClass('selected');
							currentSelection++;
							$("ul.proposal-list li:eq(" + currentSelection + ")")
								.addClass('selected');
						}
						break;
					case 13: // Enter
						if(currentSelection > -1) {
							var text = $("ul.proposal-list li:eq(" + currentSelection + ")").html();
							input.val(text);
						}
						currentSelection = -1;
						proposalList.empty();
						params.onSubmit(input.val());
						break;
					case 27: // Esc button
						currentSelection = -1;
						proposalList.empty();
						input.val('');
						break;
				}
			});

			input.bind("keyup", function(e) {
				if(e.which != 13 && e.which != 27 &&
					e.which != 38 && e.which != 40) {
					currentProposals = [];
					currentSelection = -1;
					proposalList.empty();
					if(input.val() != '') {
						var word = "^" + input.val() + ".*";
						proposalList.empty();
						for(var test in params.hints) {
							if(params.hints[test].match(word)) {
								currentProposals.push(params.hints[test]);
								var element = $('<li></li>')
									.html(params.hints[test])
									.addClass('proposal')
									.click(function() {
										input.val($(this).html());
										proposalList.empty();
										params.onSubmit(input.val());
									})
									.mouseenter(function() {
										$(this).addClass('selected');
									})
									.mouseleave(function() {
										$(this).removeClass('selected');
									});
								proposalList.append(element);
							}
						}
					}
				}
			});

			input.blur(function(e) {
				currentSelection = -1;
				if($(this).next().find('.selected').length == 1) {
					input.val($(this).next().find('.selected').html())
				}
				proposalList.empty();
				params.onBlur();
			});


			searchContainer.append(input);
			searchContainer.append(proposals);

			$(this).append(searchContainer);
		});

		return this;
	};
	
})